<template>
	<view>
		<van-cell-group>
		<!-- 标题 -->
		
		<demo-block title="签到任务标题">
		
				<van-field :value=" value " placeholder="请输入签到标题" :border=" true " @change="onChangeTitle" />

		</demo-block>
		
			<!-- 时间 -->
			
		
			
			<demo-block title="签到时间">	
			<van-cell title="开始时间" :value="dateStart" @click="onDisplay" />
			<van-cell title="结束时间" :value="dateEnd" @click="onDisplay1" />
			<van-popup
			  :show=" show "
			  round
			  position="bottom"
			>
			<van-datetime-picker type="datetime" data-type="datetime" :loading="loading" :value=" currentDate " :min-date=" minDate "
				:max-date=" maxDate " @input="onInput" @confirm="confirm"/>
			</van-popup>
			</demo-block>
			

			<!-- 标签 -->
			<demo-block title="选择标签">
			<van-collapse :value=" activeNames" @change="onChange_collapse">
			  <van-collapse-item title="标签" name="1" :value="radioLableValue">
			    
				<van-radio-group :value="radioLable">
				  <van-cell-group>
				    <van-cell v-for="(item,index) in listLable" :key="index" :title="item.title" clickable value-class="value-class" :data-value="item.id" @click="onClickLable">
				      <van-radio :name="item.id" />
				    </van-cell>
				  </van-cell-group>
				</van-radio-group>
				
			  </van-collapse-item> 
			  
			</van-collapse>
			</demo-block>
			

			<!-- 群组 -->
			<demo-block title="选择群组">
			<van-collapse :value=" activeNames" @change="onChange_collapse">
			  <van-collapse-item title="群组" name="2" :value="radioGroupValue">
			    
				<van-radio-group :value="radioGroup">
				  <van-cell-group>
				    <van-cell v-for="(item,index) in listGroup" :key="index" :title="item.groupEnt.groupName" clickable value-class="value-class" :data-value="item.groupId" @click="onClickGroup">
				      <van-radio :name="item.groupId" />
				    </van-cell>
				  </van-cell-group>
				</van-radio-group>
				
				<!-- <van-checkbox-group :value=" resultGroup " data-key="resultGroup" @change="onChangeCheckbox">
				  <van-cell-group>
				  	<van-cell v-for="(item,index) in listGroup" :key="index" :title="'复选框'+item" value-class="value-class" clickable
				  	 :data-name="item" @click="toggle">
				  		<van-checkbox @tap.native.stop="noop"  :class="'checkboxes-'+item" :name="item" />
				  	</van-cell>
				  </van-cell-group>
				</van-checkbox-group> -->
				
			  </van-collapse-item> 
			  
			</van-collapse>
			</demo-block>
			
			<!-- 目标用户 -->
			<van-cell title="用户" :value="User"  @click="onDisplayUser" />
			<van-popup
			  :show=" showUser "
			  round
			  position="bottom"
			  custom-style="height: 40%;"
			  
				@close="onDisplayUser()"
			>
			<view class="" >
				<van-row>
				  <van-col span="2" offset="1" >
					  <van-button icon="cross" type="default" @click="onDisplayUser()" size="small"></van-button>
				  </van-col>
				  
				  <van-col offset="16" span="4">
					  <van-button v-if="resultGroup.length!=columns.length" type="default" size="small" @click="allUser()">全选</van-button>
						<van-button v-else type="default" size="small" @click="noUser()">取消全选</van-button>
				  </van-col>
				</van-row>
			</view>
			<van-checkbox-group :value=" resultGroup " data-key="resultGroup" @change="onChangeCheckbox">
			  <van-cell-group>
			  	<van-cell v-for="(item,index) in columns" :key="index" :title="item.userEnt.name" value-class="value-class" clickable
			  	 :data-name="item.userId" @click="toggle">
			  		<van-checkbox @tap.native.stop="noop"  :class="'checkboxes-'+item.userId" :name="item.userId" />
			  	</van-cell>
			  </van-cell-group>
			</van-checkbox-group>
			</van-popup>
			
			<view class="createButton" style="margin: auto; width: 90%;margin-top: 40rpx;">
				<van-button type="info" size="large" @click="createButton">创建任务</van-button>
			</view>
				
			

		</van-cell-group>
		
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import Toast from '../../wxcomponents/vant/toast/toast';
	export default {
		data() {
			return {
				value: '',
				minHour: 10,
				maxHour: 20,
				minDate: new Date(2017, 10, 1).getTime(),
				maxDate: new Date(2025,10,1).getTime(),
				currentDate: new Date().getTime(),
				loading: true,
				
				show:false,
				dateStart:"",
				dateEnd:"",
				dateflag:"1",
				startTime:"",
				
				User:"默认全选",
				showUser:false,
				columns: [],
				
				
				resultLable:"",
				resultGroup:[],
				listLable: [
{
"id":1,
"labelNum":"hjwe854gwsfg554gsf54s6g4",
"title":"广电大厦7021北门"
},
{
"id":2,
"labelNum":"hjwe854gwsfg554gs784s6g4",
"title":"M304卢斌测试专用"
},
{
"id":3,
"labelNum":"7897a97fasdf9a79612uyjk",
"title":"广电大厦7021东门"
}
],
				listGroup:[],
				activeNames:['1','2'],
				
				radioLable:"",
				radioGroup:"",
				radioLableValue:"",
				radioGroupValue:""
			}
		},
		methods: {
			//标题双向绑定
			onChangeTitle(event){
				console.log(event.detail)
				this.value = event.detail
			},
			
			//提交按钮
			createButton(){
				if(this.value){
					var resultUserIdList = [];
					for (var i = 0; i < this.resultGroup.length; i++) {
						resultUserIdList.push(parseInt(this.resultGroup[i]))
					}
					uni.request({
					    url: this.apiurl + '/sign/sign', 
						method:"POST",
						data:{
						  "title": this.value,
						  "startTime": this.dateStart,
						  "aimGroup": this.radioGroup,
						  "labelId": this.radioLable,
						  "limitTime": this.dateEnd,
						  "aimUserIdList": resultUserIdList
						},
					    header: {
					        'Authorization': uni.getStorageSync('token') //自定义请求头信息
					    },
					    success: (res) => {
					        console.log(res)
							
							
					    }
					});
				}else{
					Toast.fail('请输入名字')
				}
			},
			
			//用户
			onDisplayUser(){
				this.showUser = !this.showUser
			},
			allUser(){
				for (var i = 0; i < this.columns.length; i++) {
					console.log(this.resultGroup.indexOf(''+this.columns[i].userId))
					if(this.resultGroup.indexOf(''+this.columns[i].userId)==-1)
					this.resultGroup.push(''+this.columns[i].userId)
				}
			},
			noUser(){
				this.resultGroup=[]
			},
			// onCloseUser(){
			// 	this
			// }
			
			//radio相关方法
			onClickLable(event) {
			  const {value} = event.currentTarget.dataset;
			  this.radioLable = value;
			  for (var i = 0; i < this.listLable.length; i++) {
			  	if(this.listLable[i].id == value)
					this.radioLableValue = this.listLable[i].title
			  }
			  this.getUser(this.radioGroup)
			},
			onClickGroup(event) {
			  const {value} = event.currentTarget.dataset;
			  this.radioGroup = value;
			  for (var i = 0; i < this.listGroup.length; i++) {
			  	if(this.listGroup[i].groupId == value)
			  					this.radioGroupValue = this.listGroup[i].groupEnt.groupName
			  }
			},
			defaultRadio(){
				uni.request({
				    url: this.apiurl + '/label/all_label', 
					method:"GET",
					data:{
						// "email":this.userData.email
						"pageNum":'1',
						"pageSize":"20"
					},
				    header: {
				        'Authorization': uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res)
						if(res.data.status==1){
							this.listLable = res.data.list;
							this.radioLable = this.listLable[0].id
							for (var i = 0; i < this.listLable.length; i++) {
								if(this.listLable[i].id == this.radioLable)
												this.radioLableValue = this.listLable[i].title
							}
						}else{
							this.listLable = ""
						}
						
				    }
				});
				
				
				
				uni.request({
				    url: this.apiurl + '/group/user_in_group', 
					method:"GET",
					data:{
						// "email":this.userData.email
						"pageNum":'1',
						"pageSize":"20"
					},
				    header: {
				        'Authorization': uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data)
						if(res.data.status==1){
							for (var i = 0; i < res.data.list.length; i++) {
								if(res.data.list[i].role == 'MASTER')
									this.listGroup.push(res.data.list[i])
							}
							console.log(this.listGroup)
							this.radioGroup = this.listGroup[0].groupId
							for (var i = 0; i < this.listGroup.length; i++) {
								if(this.listGroup[i].groupId == this.radioGroup)
												this.radioGroupValue = this.listGroup[i].groupEnt.groupName
							}
							this.getUser(this.radioGroup)
							
							
						}
						
				    }
				});
				
				
			},
			getUser(groupId){
				uni.request({
				    url: this.apiurl + '/group/all_users', 
					method:"GET",
					data:{
						// "email":this.userData.email
						"groupId":groupId
						
					},
				    header: {
				        'Authorization': uni.getStorageSync('token') //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res)
						if(res.data.status==1){
							this.columns = res.data.list;
							this.allUser();
						}else{
							this.listLable = ""
							
						}
						
				    }
				});
			},
			
			
			//checkbox相关方法
			noop() {},
			onChangeCheckbox(event) {
				const {
					key
				} = event.currentTarget.dataset;
				this[key] = event.detail
			},
			onChange_collapse(event){
				this.activeNames = event.detail;
			},
			toggle(event) {
				const {
					name
				} = event.currentTarget.dataset;
				const checkbox = this.selectComponent(`.checkboxes-${name}`);
				checkbox.toggle();
				console.log(this.resultGroup)
			},
			
			//控制弹出层
			//开始时间
			onDisplay(){
				this.dateflag = 1;
				this.show = !this.show
			},
			//结束时间
			onDisplay1(){
				this.dateflag = 2;
				this.startTime = JSON.parse(JSON.stringify(this.currentDate))
				this.currentDate = this.currentDate+250000
				this.show = !this.show
			},
			
			onChange(event) {
				// event.detail 为当前输入的值
				console.log(event.detail);
				
			
			},
			onInput(event) {
				this.currentDate = event.detail
			  },
			  //时间选择确认
			confirm(event) {
				
				this.currentDate = event.detail
				if(this.dateflag==1){
					this.dateStart = this.formatDate(this.currentDate)
				}else{
					this.dateEnd = this.formatDate(this.currentDate)
				}
				
				this.show = !this.show
				console.log(this.currentDate)
				console.log(this.startTime)
				if(this.currentDate<this.startTime){
					Toast.fail("日期选择错误")
					this.currentDate = JSON.parse(JSON.stringify(this.startTime))
					this.dateEnd = this.formatDate(this.currentDate)
				}
				
			  },
			  //时间格式
			formatDate(date) {
			    date = new Date(date);
			    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
			  },
			
			
		},
		created() {
			//获取用户信息
			// this.aginLogin();
			this.checkLogin();
			
			
			this.dateStart = this.formatDate(this.currentDate+150000)
			this.dateEnd = this.formatDate(this.currentDate+350000)
			this.defaultRadio();
			
		}
	}
</script>

<style>
.value-class {
  flex: none !important;
}
.van-cell-group{
	margin-bottom: 20rpx;
}
</style>
